<template>
  <div class="log-monitor">
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="日志类型">
          <el-select v-model="filterForm.type" placeholder="请选择">
            <el-option label="全部" value="" />
            <el-option label="操作日志" value="operation" />
            <el-option label="系统日志" value="system" />
            <el-option label="错误日志" value="error" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>

    <base-table
      :data="logList"
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @page-change="handlePageChange">
      <el-table-column prop="timestamp" label="时间" width="180" />
      <el-table-column prop="type" label="类型" width="100" />
      <el-table-column prop="user" label="操作人" width="120" />
      <el-table-column prop="action" label="操作内容" />
      <el-table-column prop="ip" label="IP地址" width="140" />
      <el-table-column label="操作" width="80">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleViewDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </base-table>

    <!-- 日志详情对话框 -->
    <el-dialog title="日志详情" v-model="detailVisible" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="时间">{{ currentLog.timestamp }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ currentLog.type }}</el-descriptions-item>
        <el-descriptions-item label="操作人">{{ currentLog.user }}</el-descriptions-item>
        <el-descriptions-item label="操作内容">{{ currentLog.action }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ currentLog.ip }}</el-descriptions-item>
        <el-descriptions-item label="详细信息">{{ currentLog.detail }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import BaseTable from "../components/BaseTable.vue";

// 筛选表单
const filterForm = reactive({
  dateRange: [],
  type: "",
});

// 日志列表数据
const logList = ref([
  {
    timestamp: "2024-01-20 10:00:00",
    type: "操作日志",
    user: "admin",
    action: "新增用户",
    ip: "192.168.1.1",
    detail: "新增用户：张三",
  },
  {
    timestamp: "2024-01-20 09:30:00",
    type: "系统日志",
    user: "system",
    action: "系统启动",
    ip: "192.168.1.1",
    detail: "系统正常启动完成",
  },
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 详情对话框
const detailVisible = ref(false);
const currentLog = ref({});

// 处理查询
const handleSearch = () => {
  // 这里添加查询逻辑
  ElMessage.success("查询成功");
};

// 处理重置
const handleReset = () => {
  filterForm.dateRange = [];
  filterForm.type = "";
};

// 处理导出
const handleExport = () => {
  ElMessage.success("导出成功");
};

// 处理查看详情
const handleViewDetail = (row) => {
  currentLog.value = row;
  detailVisible.value = true;
};

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里添加获取数据的逻辑
};
</script>

<style scoped>
.log-monitor {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
